@import './base/reset.styl'
@import './base/var.styl'
@import './component/header.styl'
@import './component/footer.styl'
@import './component/breadcrumb.styl'
@import './component/pic-list.styl'
@import './component/timeline-list.styl'
@import './component/pagination.styl'


html, body
  height: 100%
  min-width: $center-w

.header
  margin-bottom: -100px
.container
  min-height: 100%
  padding-top: 100px
  padding-bottom: 347px
  .banner
    display: block
    width: 100%
  .wrap
    padding-bottom: 80px
    .center
      width: $center-w
      margin: 0 auto
      padding-left: 260px
      position: relative
      transform: translateY(-20px)
      .guide
        position: absolute
        left: 0
        top: -80px
        .main
          &::after, &::before
            content: ''
            display: block
            width: 100%
            height: 80px
            background-repeat: no-repeat
            background-size: 260px 260px
          &::before
            background-image: linear-gradient(225deg, transparent 50%, $c-theme 50%, $c-theme 0)
            background-position: right bottom
          &::after
            background-image: linear-gradient(45deg, transparent 50%, $c-theme 50%, $c-theme 0)
          .title
            font-size: 32px
            font-weight: bold
            color: #fff
            background: $c-theme
            padding-left: 60px
            user-select: none
        .sub
          font-size: 18px
          color: #fff
          text-align: center
          &::before, &::after
            content: ''
            display: block
            width: 100%
            height: 80px
            background-repeat: no-repeat
            background-size: 260px 260px
          &::before
            background-image: linear-gradient(135deg, transparent 50%, #e88f8f 50%, #e88f8f 0)
            background-position: right bottom
          &::after
            background-image: linear-gradient(-45deg, transparent 50%, #e88f8f 50%, #e88f8f 0)
          .nav
            background: #e88f8f
            .link
              display: block
              width: 260px
              &:hover, &.active
                color: $c-theme
                background: #cc5959
                .text
                  background-image: linear-gradient(to bottom, currentColor, currentColor)
                  background-size: 100% 2px
                  background-repeat: no-repeat
                  background-position: bottom
              .text
                display: inline-block
                line-height: 66px
      .content
        width: 100%
        min-height: 800px
        padding: 32px
        background: #f5f5f5
        .title
          font-size: 26px
          font-weight: bold
          color: #333333
          margin-top: 30px
          margin-bottom: 60px
          user-select: none
        .slot
          font-size: 14px
          color: #333333
          line-height: 1.5
          img
            display: block
            max-width: 100%
            margin: 10px
.footer
  margin-top: -347px